<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>费县地图</title>
    <link rel="shortcut icon" href="../lib/image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../lib/css/all.css">
    <script src="../lib/js/jquery-3.3.1.min.js"></script>
    <script src="../lib/js/echarts.min.js"></script>

</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }

    #main {
        transform: rotateZ(0deg) rotateX(8deg);

    }
</style>

<body>
    <div id="app">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 800px;height: 600px;"></div>
    </div>
    <script type="text/javascript">

        var szPoinUrl = "https://www.isqqw.com/asset/get/s/data-1640076074687-LZ2HA-A8m.png";
        let uploadedDataURL = "../lib/json/map2.json";
        let geoCoordMap = {
            "大田庄乡": [117.98, 35.48],
            "费城街道": [117.94, 35.28],
            "胡阳镇": [118.10, 35.29],
            "梁邱镇": [117.76, 35.16],
            "马庄镇": [117.98, 35.15],
            "南张庄乡": [118.01, 35.39],
            "上冶镇": [117.93, 35.39],
            "石井镇": [117.73, 35.08],
            "探沂镇": [118.10, 35.20],
            "新庄镇": [117.89, 35.09],
            "薛庄镇": [118.11, 35.38],
            "朱田镇": [117.77, 35.24]
        }
    
        const points = [
            [117.94, 35.28],
            [118.10, 35.29]
        ]
    
        let tempData1 = [
            {
                name: '氧吧',
                value: [117.809, 35.15],
                ph: 7.7,
                rjy: 9.32,
                upDate: '11-09 11:45',
            },
        ];
    
        let customerBatteryCityData = [{
            name: "大田庄乡",
            value: 80
        },
        {
            name: "费城街道",
            value: 90
        },
        {
            name: "胡阳镇",
            value: 20
        },
        {
            name: "梁邱镇",
            value: 120
        },
        {
            name: "马庄镇",
            value: 110
        },
        {
            name: "南张庄乡",
            value: 400
        },
        {
            name: "上冶镇",
            value: 20
        },
        {
            name: "石井镇",
            value: 52
        },
        {
            name: "探沂镇",
            value: 40
        },
        {
            name: "新庄镇",
            value: 62
        },
        {
            name: "薛庄镇",
            value: 62
        },
        {
            name: "朱田镇",
            value: 85
        }
        ]
    
    
        let max = 480, min = 9;
        let maxSize4Pin = 100, minSize4Pin = 20;
    
        let convertData = customerBatteryCityData.map(item => {
            if (geoCoordMap[item.name]) {
                return {
                    name: item.name,
                    value: geoCoordMap[item.name].concat(item.value)
                }
            }
        })
    
        $.getJSON(uploadedDataURL, function (geoJson) {
    
            let myChart = echarts.init(document.getElementById('main'));
    
            echarts.registerMap('FX', geoJson);
            option = {
                backgroundColor: '#000',
                tooltip: {
                    trigger: 'item',
                    show: true,
                    enterable: true,
                    textStyle: {
                        fontSize: 10,
                        color: '#fff',
                    },
                    backgroundColor: 'rgba(0,2,89,0.8)',
                    // formatter: '{kk}'
                    formatter: function (v) {
                        // return v.data.name + '司法局' + '<br />' +
                        //     '<span style="display:inline-block;width:8px;height:8px;background-color:rgb(194,205,58);margin:0 5px;border-radius:5px;"></span>在册人数' +
                        //     v.data.value +
                        //     '<br /><span style="display:inline-block;width:8px;height:8px;background-color:rgb(194,205,58);margin:0 5px;border-radius:5px;"></span>累计接收社区矫正对象：' +
                        //     v.data.kk +
                        //     '<br /><span style="display:inline-block;width:8px;height:8px;background-color:rgb(194,205,58);margin:0 5px;border-radius:5px;"></span>累计接收社区矫正对象：' +
                        //     v.data
                        //         .kk
    
                        if (v.name != '氧吧') {
                            let res = '';
                            let name = v.name;
                            let count = v.value ? v.value : 0;
                            res = `<div style="box-shadow: 0 0 10px #3BD9D9; padding: 10px; position: absolute; top: 0; left:0;  border-radius: 4px; border: 1px solid #04b9ff; background: linear-gradient(to bottom,  #51bfd4 0%,rgba(35,90,178,.8) 100%);">
                                 <div style='color:#F4BD59; font-size: 14px;'>${name}</div>
                                 <div style="display: flex; align-items: center;padding-top: 6px;">
                                 <div style="height: 6px; width: 6px; border-radius: 50%; background:#F4BD59; margin-right: 10px;"></div> <span style='color:#fff;font-size: 12px;margin-right: 20px;'>tooltip</span><span style="font-size: 12px;font-family: 'PangMenZhengDao'">${count}</span>
                                 </div>
                              </div>`;
    
                            return res
                        }
    
    
                    }
                },
                geo: [{
                    map: 'FX',
                    aspectScale: 0.9,
                    roam: false, // 是否允许缩放
                    zoom: 1.2, // 默认显示级别
                    layoutSize: '78%',
                    layoutCenter: ['42%', '50%'],
                    itemStyle: {
                        normal: {
                            areaColor: {
                                type: 'linear-gradient',
                                x: 0,
                                y: 400,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgb(19,68,154)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgb(15,169,195)' // 50% 处的颜色
                                }],
                                global: true // 缺省为 false
                            },
                            borderColor: 'rgb(0,154,252)',
                            borderWidth: 1
                        },
                        emphasis: {
                            areaColor: {
                                type: 'linear-gradient',
                                x: 0,
                                y: 300,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(37,108,190,1)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(15,169,195,1)' // 50% 处的颜色
                                }],
                                global: true // 缺省为 false
                            }
                        }
                    },
                    emphasis: {
                        itemStyle: {
                            areaColor: 'rgb(0,154,252)',
                        },
                        label: {
                            show: false,
                            // color: 'rgb(0,154,252)',
                        }
    
                    },
                    select: {
                        itemStyle: {
                            color: 'rgb(0,154,252)',
                            areaColor: ''
                        },
                        label: {
                            show: 0,
                            color: 'rgb(0,154,252)',
                        }
                    },
                    zlevel: 3,
                }
                ],
                series: [
                    {
                        geoIndex: 0,
                        // coordinateSystem: 'geo',
                        showLegendSymbol: true,
                        type: 'map',
                        roam: true,
                        label: {
                            normal: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: '#2ab8ff',
                                borderWidth: 1.5,
                                areaColor: '#12235c'
                            },
                            emphasis: {
                                areaColor: '#2AB8FF',
                                borderWidth: 0,
                            }
                        },
                        map: 'FX', // 使用
                        data: customerBatteryCityData
                    },
                    // 柱状体的底部
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        zlevel: 4,
                        label: {
                            // formatter: '{b}',
                            position: 'bottom',
                            color: '#fff',
                            fontSize: 14,
                            show: true
                        },
                        itemStyle: {
                            color: 'rgb(0,210,255, 1)',
                            opacity: 1
                        },
                        silent: true,
                        data: scatterData2(),
                    },
                    { // 动效散点公共配置项
                        silent: true, // 暂不支持鼠标交互
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 4,
                        rippleEffect: {
                            //涟漪特效
                            period: 4, //动画时间，值越小速度越快
                            // brushType: 'stroke', //波纹绘制方式 stroke, fill
                            scale: 10 //波纹圆环最大限制，值越大波纹越大
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right', //显示位置
                                offset: [0, 0], //偏移设置
                                formatter: function (params) {
                                    //圆环显示文字
                                    return ''
                                },
                                fontSize: 13,
                                color: 'white'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        symbol: 'circle',
                        symbolSize: 10,
                        itemStyle: {
                            normal: {
                                show: false,
                                borderWidth: 1,
                                color: 'rgba(255, 86, 11, 1)'
                            }
                        },
                        data: [
                            {
                                name: "城市A",
                                value: [
                                    ...points[0]
                                ]
                            }, {
                                name: "城市B",
                                value: [
                                    ...points[1]
                                ]
                            }
                        ],
                    },
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'image://' + szPoinUrl,
                        legendHoverLink: true,
                        symbolSize: [28, 33],
                        // legendHoverLink: true,
                        label: {
                            show: true,
                            offset: [0, 60], //偏移设置
                            fontSize: 14,
                            lineHeight: 20,
                            borderWidth: 1,
                            // backgroundColor: '#061a4c',
                            // borderColor: '#2BD8FB',
                            backgroundColor: {
                                image: 'https://www.juntaikeji.com:19365/lib/image/login/bg.png'
                            },
                            padding: 5,
                            formatter(value) {
                                return `{name|${value.data.name}}\nph值：{pt|${value.data.ph}}\n溶解氧：{pt|${value.data.rjy}}`;
                            },
                            rich: {
                                name: {
                                    fontWeight: 'bold',
                                    fontSize: 14,
                                    color: '#fff',
                                },
                                pt: {
                                    fontSize: 14,
                                    color: '#72FEA3',
                                },
                                date: {
                                    color: 'rgb(255,255,255,0.8)',
                                },
                            },
                            color: '#fff',
                        },
                        itemStyle: {
                            normal: {
                                color: '#D8BC37', //标志颜色
                                shadowBlur: 2,
                                shadowColor: 'D8BC37',
                            },
                        },
                        data: tempData1,
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke',
                        },
                        hoverAnimation: true,
                        zlevel: 4,
                    },
                    {
                        name: '点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'pin',
                        symbolSize: function (val) {
    
                            var a = (maxSize4Pin - minSize4Pin) / (max - min);
                            var b = minSize4Pin - a * min;
                            b = maxSize4Pin - a * max;
    
                            return a * val[2] + b;
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                                }, 
                                formatter: function (v) {
                                    return v.value[2]
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#F62157', //标志颜色
                            }
                        },
                        zlevel: 5,
                        data: convertData,
                    }
                ]
            }
            myChart.setOption(option);
    
            myChart.on('click', function (e) {
                e.color = '#d50000'
                e.event.target.style.fill = '#d50000'
                console.log(e);
    
            });
    
        })
    
        // 柱状体的底部
        function scatterData2() {
            return customerBatteryCityData.map((item) => {
                return {
                    name: item.name,
                    value: geoCoordMap[item.name]
                }
            })
        }
    
        $(window).resize(function () {
            echarts.init(document.getElementById('main')).resize();
        });
    
    </script>
    
</body>

</html>